<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/shop" replace>商户管理</el-breadcrumb-item>
      <el-breadcrumb-item>商户信息汇总</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">商户信息汇总</div>
      <div class="searchBox">
        <el-form ref="form" :model="searchObject" size="mini" inline>
          <div class="block">
            <el-form-item label="商户手机号">
              <el-input v-model="searchObject.shopMobile"></el-input>
            </el-form-item>
            <el-form-item label="商店名称">
              <el-input v-model="searchObject.shopName"></el-input>
            </el-form-item>
            <el-form-item label="所属区域">
              <v-distpicker @province="onChangeProvince" @city="onChangeCity"
                            :province="searchObject.shopRegion.province"
                            :city="searchObject.shopRegion.city" hide-area></v-distpicker>
            </el-form-item>
            <el-form-item label="所属商圈">
              <el-select v-model="searchObject.shopArea" placeholder="请选择">
                <el-option v-for="item in shopAreaOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="searchObject.shopAddress"></el-input>
            </el-form-item>
            <el-form-item>
              <export-excel :tHeader="tHeader" :filterVal="filterVal" :tableData="tableData"></export-excel>
            </el-form-item>
          </div>
          <div class="block">
            <el-form-item label="专员编号">
              <el-input v-model="searchObject.BDId"></el-input>
            </el-form-item>
            <el-form-item label="专员姓名">
              <el-input v-model="searchObject.BDName"></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="searchObject.shopReview" placeholder="请选择">
                <el-option v-for="item in shopReviewOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开店状态">
              <el-select v-model="searchObject.shopStatus" placeholder="请选择">
                <el-option v-for="item in shopStatusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商户类别">
              <el-select v-model="searchObject.shopType" placeholder="请选择">
                <el-option v-for="item in shopTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" circle @click="search"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="shopId" label="商家编号" align="center"></el-table-column>
        <el-table-column label="商户类别" align="center">
          <template slot-scope="data">
            <router-link :to="{ path: 'shop/shopType', query: { shopId: data.row.shopId }}" replace
                         v-if="data.row.shopType===item.value" v-for="item in shopTypeOptions" :key="item.value">
              {{item.label}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="shopMobile" label="商家账号" align="center"></el-table-column>
        <el-table-column prop="shopName" label="商家名称" align="center"></el-table-column>
        <el-table-column prop="shopRegion" label="所属区域" align="center"></el-table-column>
        <el-table-column prop="shopArea" label="所属商圈" align="center"></el-table-column>
        <el-table-column prop="shopAddress" label="详细地址" align="center"></el-table-column>
        <el-table-column prop="mobile" label="店内联系电话" align="center"></el-table-column>
        <el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
        <el-table-column prop="applicationTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="lastLoginTime" label="最后登录时间" align="center"></el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="data">
            <span v-if="data.row.status===item.value" v-for="item in shopReviewOptions"
                  :key="item.value">{{item.label}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户状态" align="center">
          <template slot-scope="data">
            <span v-if="data.row.shopStatus===item.value" v-for="item in shopStatusOptions"
                  :key="item.value">{{item.label}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商家详情" align="center">
          <template slot-scope="data">
            <router-link :to="{path: 'shop/shopInfo', query: {shopId: data.row.shopId}}">查看</router-link>
          </template>
        </el-table-column>
        <el-table-column label="商家银行卡详情" align="center" width="100">
          <template slot-scope="data">
            <router-link :to="{path: 'public/bankCardInfo', query: {shopId: data.row.shopId}}">商家银行卡详情</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
        <el-table-column prop="userMobile" label="联系方式" align="center"></el-table-column>
        <el-table-column label="有效优惠券" align="center">
          <template slot-scope="data">
            <span>{{data.row.count}}</span>
            <router-link :to="{path: 'shop/shopDiscountInfo', query: {shopId: data.row.shopId}}">优惠券详情</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="userMoney" label="账户余额" align="center"></el-table-column>
        <el-table-column label="交易记录" align="center">
          <template slot-scope="data">
            <router-link :to="{path: 'public/tradeSum', query: {shopId: data.row.shopId}}">交易记录</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="BDId" label="专员编号" align="center"></el-table-column>
        <el-table-column prop="BDName" label="专员姓名" align="center"></el-table-column>
        <el-table-column prop="review" label="审核人" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <span v-if="data.row.statusCode === 0" class="colors" @click="clickThaw(data.row)">解冻</span>
            <span v-else class="colors" @click="clickFreeze(data.row)">冻结</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange" :maxTotal="maxTotal"></pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import vDistpicker from 'v-distpicker'

  import pagination from 'components/pagination'
  import exportExcel from 'components/exportExcel'

  export default {
    data () {
      return {
        maxTotal: 10,
        tableData: [],
        searchObject: {
          shopMobile: '',
          shopName: '',
          shopRegion: {
            province: '',
            city: ''
          },
          shopArea: '',
          shopAddress: '',
          BDId: '',
          BDName: '',
          shopReview: '',
          shopStatus: '',
          shopType: ''
        },
        shopAreaOptions: [],
        shopReviewOptions: [],
        shopStatusOptions: [],
        shopTypeOptions: [],
        tHeader: [],
        filterVal: []
      }
    },
    created () {
    },
    methods: {
      search () {
      },
      clickThaw (item) {
        // console.log(item);
        this.$confirm('确定要解冻用户？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            item.statusCode = 1
            this.$message({
              type: 'success',
              message: '解冻用户成功',
              center: true
            })
          })
          .catch(action => {
            this.$message({
              message: '你取消了这次操作',
              center: true
            })
          })
      },
      clickFreeze (item) {
        // console.log(item);
        this.$confirm('确定要冻结用户？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            item.statusCode = 0
            this.$message({
              type: 'success',
              message: '冻结用户成功',
              center: true
            })
          })
          .catch(() => {
            this.$message({
              message: '你取消了这次操作',
              center: true
            })
          })
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      onChangeProvince (data) {
        console.log(data)
        // this.searchObject.shopRegion.province = data.value
      },
      onChangeCity (data) {
        this.searchObject.shopRegion.city = data.value
      }
    },
    components: {
      vDistpicker,
      pagination,
      exportExcel
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>

</style>
